<template>
  <div style="display: inline">
    <el-button @click="useStock" type="success" :disabled="orderIds.length === 0" class="mgr10 mgb10">用库存</el-button>
    <el-dialog title="确认使用该库存？" :visible.sync="dialog">
      <template slot="title">
        <div class="header-title">
          <span style="font-size: 18px">确认使用该库存？</span>
          <span style="font-size: 14px">(当前选中订单数量：{{this.orderArr.length}})</span>
        </div>
      </template>
      <div class="stock-table">
        <el-table
          :data="tableData"
          :border="true"
        >
          <el-table-column
            prop="image"
            label="商品图片"
            width="100"
          >
            <template slot-scope="{row}">
              <div class="img-sel-box">
                <img :src="row.image" style="width: 85px;height: 85px">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="商品信息"
            min-width="300"
          >
            <template slot-scope="{row}">
              <div class="order-goods-info">
                <div class="goods-id">{{row.goodsId}}</div>
                <el-tooltip class="item" effect="dark" :content="row.title" placement="top">
                  <div class="goods-title hidden-1">
                    {{row.title}}
                  </div>
                </el-tooltip>
                <div class="goods-SKU" v-if="row.sku">SKU：{{row.sku}}</div>
                <div class="goods-SKU-info" v-if="row.attributes.length > 0">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>

                </span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="num"
            label="消耗库存"
            width="100"
          >
            <template slot-scope="{row}">
              <span>{{row.num}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="stockNum"
            label="实时剩余库存"
            width="100"
          >
            <template slot-scope="{row}">
              <span>{{row.stockNum}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-form :model="currentForm" label-width="150px" ref="currentForm" style="margin-top: 30px">
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :rows="2"
            maxlength="1000"
            show-word-limit
            placeholder="选填，如果当前订单有更多快递或其他来源，请在此处填写说明"
            v-model.trim="currentForm.remark">
          </el-input>
        </el-form-item>
        <el-form-item label="包装服务">
          <sticker-package v-model="currentForm.packageType"></sticker-package>
        </el-form-item>
        <el-form-item label="本次代贴单费用">
          <div style="color: #ED6A0C;font-size: 16px">{{calStickerPrice}} 元</div>
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="loading" :disabled="checkSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {stockOrder} from "@/api/order";
import store from "@/store";
import {order} from "mockjs/src/mock/random/helper";
import {EventBus} from "@/utils/eventBus";
import StickerPackage from "@/views/order/components/stickerPackage.vue";
import {deepCopy} from "@/utils";

export default {
  name: "StockButton",
  components: {StickerPackage},
  props:{
    orderData:{
      type: Array,
      require: true,
    },
    orderIds:{
      type: Array,
      require: true,
    },
    disable:{
      default: false,
    },
    orderArr:{
      type: Array,
      require: true,
    },
  },
  created() {
    this.setStoreParams()
  },
  computed:{
    tableData(){
      const tableData = [];
      this.orderData.forEach(item =>{
        const orderGoods = item.orderGoods[0]
        const obj = {
          goodsId: orderGoods.goodsId,
          title: orderGoods.title,
          image: orderGoods.image,
          attributes:orderGoods.attributes,
          sku:orderGoods.sku,
          num: item.num,
          stockNum: item.stockNum,
          stockId: item.stockId,
        }
        const orderItem = tableData.find(_item => _item.stockId && _item.stockId === orderGoods.stockId)

        if(orderItem){
          orderItem.num += item.num; // 消耗库存增加
        }else{
          tableData.push(obj)
        }

      })
      return tableData
    },
    // 校验是否能提交数据
    checkSubmit(){
      const flag = this.tableData.every(item=>{
        return item.stockNum >= item.num
      })
      return !flag
    },
    // 计算总的贴单金额
    calStickerPrice(){
      let sumPrice = 0;
      if(this.stickerType === 1){
        let sumStickerPrice = this.$cal.accMul(this.orderArr.length,this.stickerPrice);
        sumPrice = this.$cal.accAdd(sumPrice,sumStickerPrice)
      }else{
        this.orderArr.forEach(item=>{
          switch (item.siteId){
            case 'MLM': // 墨西哥
              sumPrice = this.$cal.accAdd(sumPrice,this.MLMPrice)
              break;
            case 'MLB':
              sumPrice = this.$cal.accAdd(sumPrice,this.MLBPrice)
              break;
            case 'MLC':
              sumPrice = this.$cal.accAdd(sumPrice,this.MLCPrice)
              break;
            case 'MCO':
              sumPrice = this.$cal.accAdd(sumPrice,this.MCOPrice)
              break;
          }
        })
      }
      const orderNum = this.orderArr.length;
      let packagePrice = 0; //包装服务费
      switch (this.currentForm.packageType){
        case 'vacuum': // 真空
          packagePrice = this.$cal.accMul(orderNum,this.vacuum)
          break;
        case 'leatheroid': // 纸皮
          packagePrice = this.$cal.accMul(orderNum,this.leatheroid)
          break;
        case 'special': // 特殊
          packagePrice = this.$cal.accMul(orderNum,this.special)
          break;
      }

      sumPrice = this.$cal.accAdd(sumPrice,packagePrice)

      return sumPrice;
    }
  },
  data(){
    return {
      dialog: false,
      loading: false,
      currentForm: {
        orderIds: [],
        remark: '', // 备注
        packageType: '', // 选择包装类型
      },
      stickerType: 1,
      stickerPrice: 0,
      vacuum: 0,
      leatheroid: 0,
      special: 0,
      MLMPrice: 0, // 墨西哥
      MLBPrice: 0, // 巴西
      MLCPrice: 0, // 智利
      MCOPrice: 0, // 哥伦比亚
    }
  },
  methods:{
    useStock(){
      this.dialog = true
    },
    submitForm(){
      this.loading = true
      this.currentForm.orderIds = [];
      this.orderArr.forEach(item => {
        this.currentForm.orderIds.push(item.orderId)
      })
      const postData = deepCopy(this.currentForm);
      stockOrder(postData)
        .then(res=>{
          this.loading = false;
          if(res.error === 0){
            this.dialog = false;
            this.$emit('changeOrder',true)
            this.$successMessage(res.message)
          }else if(res.error === 300){
            EventBus.$emit('showRecharge',res.message);
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    // 设置贴单价格参数
    setStoreParams(){
      this.stickerType = this.$store.getters.stickerType;
      this.stickerPrice = this.$store.getters.stickerPrice;
      this.vacuum = this.$store.getters.vacuum;
      this.leatheroid = this.$store.getters.leatheroid;
      this.special = this.$store.getters.special;
      this.MLMPrice = this.$store.getters.MLMPrice;
      this.MLBPrice = this.$store.getters.MLBPrice;
      this.MLCPrice = this.$store.getters.MLCPrice;
      this.MCOPrice = this.$store.getters.MCOPrice;
    },
  }
}
</script>
<style lang="scss">
.order-content{
  .stock-table{
    table th,
    table td {
      border-bottom: 1px solid #dfe6ec !important;
    }
    //去掉最下面的那一条线
    .el-table::before {
      height: 1px;
    }
    .el-table tbody tr:hover>td{
      background: #ffffff !important;
    }
  }
}

</style>

<style scoped lang="scss">
.box{
  margin-bottom: 10px;
  .goods-box{
    display: flex;
    .goods-image{
      height: 50px;
      width: 50px;
      margin-right: 20px;
    }
    .goods-title{
      width: 70%;

      .title{
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        color: #AAAAAA;
      }
      .listing{
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
      }
    }
  }
  .stock-tips{
    font-weight: 650;
    font-style: normal;
    font-size: 12px;
    color: #FF0000
  }
}
.order-goods-info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100px;
  .goods-id{
    font-weight: 650;
    font-style: normal;
    font-size: 13px;
    color: #555555;
  }
  .goods-title{
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    color: #AAAAAA;
  }
  .goods-SKU{
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    color: #555555;
  }
  .goods-SKU-info{
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: #7F7F7F;
    span:last-of-type .attr-link{
      display: none;
    }
  }

}
.goods-price{
  .price-item{
    margin-bottom: 3px;
    font-size: 13px;
    .currency{
      font-weight: 500;
      font-style: normal;
      color: #AAAAAA;
      margin-right: 10px;
    }
    .price{
      color: #009C46;
      font-weight: 500;
      font-style: normal;
    }
  }
}
.goods-num{
  font-size: 13px;
  .text{
    color: #AAAAAA;
    font-weight: 500;
    font-style: normal;
  }
  .num{
    color: #FC6347;
    font-weight: 500;
    font-style: normal;
  }
}
</style>
